<script setup>
import { useRouter, RouterView, useRoute } from 'vue-router';
import { ref } from 'vue';
import {getHomeData} from '@/api/index.js'
import { onMounted } from 'vue'

import Cateicon from '@/components/home/Cateicon.vue'
import Crosswise from '@/components/home/Crosswise.vue'
import Article from '@/components/home/Article.vue'
import Title from '@/components/home/Title.vue'
import Pice from '@/components/home/Pice.vue'
import Category from '@/components/home/Category.vue'


const value = ref('');
const router = useRouter()
const colors = ref(['rgb(250,90,80)', 'rgb(10,205,152)', 'rgb(130,110,224)'])
let msg = ref(2)

let articleList = ref([])
let courseList=ref([])
let choiceList=[]

let fir=ref([])
let sec=ref([])
let categorylist=ref([])

let show=ref(true)
let nlist=ref([])

onMounted( () => {
    getdata()
})

const getdata =  async() => {
    const homedata = localStorage.getItem('homeCache');
  const courseListFromCache = homedata ? JSON.parse(homedata) : null;
    const choice=localStorage.getItem('course');
    // 不用加载分类
    show.value=!choice

  if (courseListFromCache && choice) {
    courseList.value = courseListFromCache.course;
    articleList.value = courseListFromCache.article;
    // ****************// 因为是从一个api获取的，所以不用判断直接赋值即可
    const cate=JSON.parse(localStorage.getItem('categroy'))
   
    categorylist.value=cate

    const result=JSON.parse(localStorage.getItem('course'))
    nlist.value=result
  } else {
    const res = await getHomeData({list:choiceList});
    // console.log(res,'res');

    const homeCache = {
      course: res.flashHotCours,
      article: res.artdata,
    };
    // const categroy = {
    //   firlevel: res.firlevel.splice(0,3),
    //   seclevel: res.seclevel,

    // };

    localStorage.setItem('homeCache', JSON.stringify(homeCache));
    localStorage.setItem('categroy', JSON.stringify(res.clist));
    // console.log(res);

    courseList = res.flashHotCours
    articleList = res.artdata
    categorylist.value=res.clist
    // fir.value=res.firlevel.splice(0,3),
    // sec.value=res.seclevel
  }
}

// 点击消息进入消息页面
const onClickBell = () => {
    console.log(111);
    router.push("/my/session")
}

const iconBoxes = ref([
    { iconName: 'fire', boxColor: 'rgb(250,90,80)', title: "热门好课" ,sign:'hot'},
    { iconName: 'bookmark', boxColor: 'rgb(10,205,152)', title: "免费专区" ,sign:'free'},
    { iconName: 'shopping-cart', boxColor: 'rgb(7,157,235)', title: "限时优惠" ,sign:'sale'},
    { iconName: 'star', boxColor: 'rgb(260,201,74)', title: "精品课程" ,sign:'quality'},
    { iconName: 'column', boxColor: 'rgb(130,110,224)', title: "系列课程" ,sign:'catena'},
]);


const onSearch = () => {
    router.push('/search')
}
// 点击课程详情跳转
const storeCourseData = (item) => {
    localStorage.setItem('listObj', JSON.stringify(item));
    router.push('/xiang')
};

// 图标跳转
const handleClick=(item)=>{ 
    // console.log(item);
    router.push({path:`/courselist/${item}`})
}
//传过来的分类
const handleChoice=async ({state,info})=>{
    // console.log(info);
    if(info.length){
        const res = await getHomeData({list:info});
    localStorage.setItem('course', JSON.stringify(res.result));
    // console.log(res);
    nlist.value=res.result
    }
    show.value=state
   

    
}
const changeCate=()=>{
    show.value=true

}

</script>

<template>
    <div id="app">

        <div class="level">
            <!-- <Category v-if="show" :firlevel=fir :seclevel=sec @choice="handleChoice"></Category> -->
            <Category v-if="show" :category=categorylist.slice(0,3) @choice="handleChoice"></Category>
        </div>
     <div class="home" v-show="!show">
            <!-- search -->
        <div class="top">
            <van-search shape='round' v-model="value"  placeholder="搜索课程/文章" @click="onSearch">
                <!-- <template #action>
                    <div class="icon">
                        <van-icon @click="onClickBell" name="bell" :badge=msg />
                    </div>
                </template> -->
            </van-search>
            <div class="icon">
                 <van-icon class="msg" @click="onClickBell" name="bell" :badge=msg />
            </div>
        </div>

        <!-- banner -->
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="../../../assets/swiper.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../../../assets/swiper.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../../../assets/swiper.png" alt="">
                </van-swipe-item>

            </van-swipe>
        </div>

        <!-- class category -->
        <div class="cat-out">
            <div class="cate">
                <div v-for="(item, index) in iconBoxes" :key="index">
                    <Cateicon class="cate-icon" :iconName="item.iconName" :boxColor="item.boxColor"
                        :title="item.title" @click="handleClick(item.title)" />
                </div>
            </div>
        </div>

        <!-- 限时优惠 -->
        <div class="item">
            <Title :title="'限时优惠'"></Title>
            <div class="card">
                <div class="cardb">
                    <!-- {{ courseList }} -->
                    <Crosswise v-for="(item, index) in courseList" :key="index" :title="item.title" :price="item.price" :pic="item.image" :dis="item.discount" @click="storeCourseData(item)"
                    >
                    </Crosswise>
                   
                </div>
            </div>
        </div>
        <!-- 精选好文 -->
        <div class="item">
            <Title :title="'精选好文'"></Title>
            <div class="card">
                <div class="cardb">
                    <Article v-for="(item, index) in articleList" :key="index" :title="item.title" :name="item.name" 
                        :boxColor="colors[index % colors.length]">
                    </Article>
                </div>
            </div>
        </div>

        <!-- class -->
        <div class="outer" v-for="(item, index) in nlist" :key="index">
            <Title :title="item.title" :cid="item.cid"></Title>
            <div class="inner">
                <div class="one" >
                    <Pice v-for="(ele, index) in item.children" :key="index" :pic="ele.image" :title="ele.title" :price="ele.price" :dis="ele.discount" :num="ele.num" 
                    @click="storeCourseData(ele)"></Pice>
                </div>
            </div>
        </div>
        <div>
            <van-button class="footbtn" type="primary" @click="changeCate">调整感兴趣的分类</van-button>

        </div>

        <!-- show -->
    </div> 
       



    </div>
</template>



<style lang="scss" scoped>
#app {
    padding: 0.2rem 0.1rem 0 0.3rem;
   
}
.level{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
 }
.top {
    display: flex;

    .van-search {
        flex: 1 1 85%;
    }
    .icon {
        flex: 1 1 0.5%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: blueviolet;
        .msg{
            font-size:0.5rem
        }
    }
}

.my-swipe {
    margin-top: 0.6rem;
    height: 5rem;
    width: 100%;

    .van-swipe-item {
        color: #fff;
        font-size: 0.5rem;
        width: 100%;
        height: 100%;
        text-align: center;

        img {
            width: 90%;
            height: 100%;
            object-fit: cover;
            max-height: 4.8rem;
            border-radius: 5%;
        }
    }
}

.cat-out {
    overflow: hidden;
    max-height: 2.5rem;

    .cate {
        display: flex;
        overflow-x: auto;
        height: 2.56rem;
        div {
            margin-right: 0.5rem;
            width: 2rem;
        }
    }
}

.item {
    margin: 0.7rem 0.04rem;

    a {
        font-size: 1.2rem;
        color: rgb(93, 93, 251);
        margin-right: 0.3rem;
    }
}

.card {
    overflow: hidden;
    max-height: 7.2rem;
    padding: 0.025rem;

    .cardb {
        display: flex;
        overflow-x: auto;
        height: 7.2rem;
        div {
            box-shadow: 0 0 0.025rem rgba(0, 0, 0, 0.3);
            margin-right: 0.5rem;
            border-radius: 5%;
        }
    }

}

.outer {
    overflow: hidden;
    margin-bottom: 0.7rem;
}

.footbtn{
        display: block; 
  margin: 0 auto;
 border-radius: 0.5rem
}


</style>
